{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}list article detail{% endblock %}
{% block content %} 
{% with total_likes=article.users_like.count users_like=article.users_like.all %}
<div>
    <header>
        <h1>{{ article.title }}</h1> 
        <p><a href="{% url 'article:author_articles' article.author.username %}">{{article.author.username}}</a></p>
        <span style="margin-left: 20px;" class="glyphicon glyphicon-thumbs-up">{{ total_likes }} 赞</span>
    </header>
    
    <link rel="stylesheet" href="{% static 'editor/css/editormd.preview.css' %}" /> 
    <div id='editormd-view'>
        <textarea id="append-test" style="display:none;"> 
{{ article.body }}
        </textarea>
    </div>
    <div>
        <p class="text-center">
            <a onclick="like_article({{ article.id }}, 'like')" href="#"><span class="glyphicon glyphicon-thumbs-up">赞</span></a>
            <a onclick="like_article({{ article.id }}, 'unlike')" href="#"><span class="glyphicon glyphicon-thumbs-down">踩</span></a>
        </p>
    </div>
    <p class="text-center"><strong>点赞本文的读者</strong></p>
    {% for user in article.users_like.all %}
    <p class="text-center">{{ user.username }}</p>
    {% empty %}
    <p class="text-center">还没有人点赞</p>
    {% endfor %}
</div>
<script src='{% static "js/jquery.js" %}'></script>
<script src='{% static "editor/lib/marked.min.js" %}'></script>
<script src='{% static "editor/lib/prettify.min.js" %}'></script> 
<script src='{% static "editor/lib/raphael.min.js" %}'></script>
<script src='{% static "editor/lib/underscore.min.js" %}'></script> 
<script src='{% static "editor/lib/sequence-diagram.min.js" %}'></script> 
<script src='{% static "editor/lib/flowchart.min.js" %}'></script> 
<script src='{% static "editor/lib/jquery.flowchart.min.js" %}'></script> 
<script src='{% static "editor/editormd.min.js" %}'></script>
<script src='{% static "js/layer.js" %}'></script>
<script type="text/javascript"> 
$(function(){
    editormd.markdownToHTML("editormd-view", {
        htmlDecode: "style, script, iframe",
        emoji: true,
        taskList: true,
        tex: true,
        flowChart: true,
        sequenceDiagram: true,
    });
});
function like_article(id, action) {
    $.ajax({
        url: "{% url 'article:like_article' %}",
        type: "POST",
        data: {"id":id, "action":action},
        success: function(e) {
            if(e=="1") {
                layer.msg("感谢点赞！");
                window.location.reload();
            } else {
                layer.msg("我会继续努力");
                window.location.reload();
            }
        },
    });
}
</script>
{% endwith %}
{% endblock %}
